<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>4_getSnapShotBeforeUpdate的使用场景</title>
        <style>
            .list {
                width: 200px;
                height: 150px;
                background-color: skyblue;
                overflow: auto;
            }

            .news {
                height: 30px;
            }
        </style>
    </head>
    <body>
        <!-- 准备好一个“容器” -->
        <div id="test"></div>

        <!-- 引入react核心库 -->
        <script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
        <!-- 引入react-dom，用于支持react操作DOM -->
        <script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
        <!-- 引入babel，用于将jsx转为js -->
        <script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>

        <script type="text/babel">
            class NewsList extends React.Component {

                state = {newsArr: []}

                //组件挂载完毕的钩子
                componentDidMount() {
                    setInterval(() => {
                        //获取原状态
                        const {newsArr} = this.state
                        //模拟一条新闻
                        const news = '新闻' + (newsArr.length + 1)
                        //更新状态 将news 放入 newsArr最顶部
                        this.setState({newsArr: [news, ...newsArr]})
                    }, 1000);
                }

                getSnapshotBeforeUpdate() {
                    //scrollHeight 属性是一个只读属性，它返回该元素的像素高度，高度包含内边距（padding），
                    // 不包含外边距（margin）、边框（border），是一个整数，单位是像素 px。
                    return this.refs.list.scrollHeight
                }

                componentDidUpdate(preProps, preState, height) {
                    //scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。
                    this.refs.list.scrollTop += this.refs.list.scrollHeight - height
                }

                render() {
                    return (
                        <div className="list" ref="list">
                            {
                                this.state.newsArr.map((n, index) => {
                                    return <div key={index} className="news">{n}</div>
                                })
                            }
                        </div>
                    )
                }
            }

            ReactDOM.render(<NewsList/>, document.getElementById('test'))
        </script>
    </body>
</html>